<template>
  <div>
    <div style="height: auto; width: 100%">
      <swiper
        :options="swiperOption"
        ref="mySwiper"
        style="width: 100%; height: auto"
      >
        <!-- slides -->
        <swiper-slide
          v-for="(v, index) in swi_obj"
          :key="index"
          style="width: 100%; height: auto; overflow: hidden"
        >
          <img :src="v.img" style="width: 100%; height: auto" />
        </swiper-slide>
        <!-- Optional controls -->
        <div class="swiper-pagination" slot="pagination"></div>
      </swiper>
    </div>
    <div class="flex-c-c-c" style="width: 100%; height: auto">
      <div class="homeBoxBj_0">
        <div
            class="flex-r-b-c"
            style="width: 1200px; height: 56px; margin-top: 30px"
        >
          <div class="flex-c-c-c" style="width: 150px; height: 40px"></div>
          <span style="font-size: 40px; color: #534036">企宣视频</span>
          <div style="width: 150px; height: 40px;"></div>
        </div>


        <div class="flex-r-b-b" style="width: 1200px; height: 416px; margin-top: 30px">
          <div class="showImg">
            <!--轮播图片 -->
            <img

                @mouseover="changeInterval(true)"
                @mouseleave="changeInterval(false)"
                v-for="(item, key2) in videoList"
                :key="key2"
                :src="item.video_cover"
                alt="图片"

                @click="SeeVideo(item)"
                v-show="key2 == currentIndex"
            />
            <!-- //左侧按钮 -->
            <div @click="clickIcon('up')" class="iconDiv icon-left">
              <i class="el-icon-caret-left"></i>
            </div>
            <!-- //右侧按钮 -->
            <div @click="clickIcon('down')" class="iconDiv icon-right">
              <i class="el-icon-caret-right"></i>
            </div>
            <!-- //控制圆点 -->
            <div class="banner-circle">
              <ul>
                <li
                    @click="changeImg(key3)"
                    v-for="(item, key3) in videoList"
                    :key="key3"
                    :class="key3 === currentIndex ? 'active' : ''"
                ></li>
              </ul>
            </div>

<!--            <div class="mask" v-if="videoState == true" @click="masksCloseFun"></div>-->
<!--            &lt;!&ndash; 弹窗 &ndash;&gt;-->
<!--            <div class="videomasks" v-if="videoState == true">-->
<!--              &lt;!&ndash; 视频：h5的视频播放video &ndash;&gt;-->
<!--              <video :src="videoSrc" controls="controls" autoplay width="100%" height="100%">-->
<!--                您的浏览器不支持 video 标签。-->
<!--              </video>-->
<!--            </div>-->

            <el-dialog
                width="50%"
                height="500px"
                :visible.sync="viewVideo"
                :before-close="handleCancel"
            >
              <video
                  :src="this.videoSrc"
                  width="100%"
                  height="500px"
                  autoplay
                  controls="controls"
                  :state="viewVideo"
                  ref="vueRef"
              ></video>
            </el-dialog>
          </div>
          <div class="vvx-tabs-box">
            <div class="vvx-tabs-btn">
              <p class="line" setedaria="true"></p>
              <p class="lf tb-bn mtbs tab-bg03" >
                <a class="cur">企业视频</a>
              </p>
<!--              <p class="more rt"  >-->
<!--                <a href="">更多</a>-->
<!--              </p>-->
              <p class="more rt"  >
              <router-link
                  tag="a"
                  to="/video"
              >
                更多
              </router-link>
              </p>
            </div>
            <div class="vvx-tabs-group vvx-mtb-list mt5">
              <ul class="vvx-tabs-list vvx-mtb-item" style="">
                <li class="clearfix"
                    v-for="(v, i) in videoList"
                    :key="i"
                >
                  <a title="$v.title" >
                    {{v.title}}
                  </a>
                  <span>{{v.createdate}}</span>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="flex-c-c-c" style="width: 100%; height: auto">
      <div class="homeBoxBj">
        <div
          class="flex-r-b-c"
          style="width: 1200px; height: 56px; margin-top: 30px"
        >
          <div class="flex-c-c-c" style="width: 150px; height: 40px"></div>
          <span style="font-size: 40px; color: #534036">{{
            obj.phylogeny.hade.phy_title
          }}</span>
          <div style="width: 150px; height: 40px;"></div>
          <!-- <router-link
            to="/history"
            tag="div"
            class="flex-c-c-c cur divs_btn1"
            style="width: 150px; height: 40px; background-color: #907a6e"
          >
            <span style="font-size: 14px; color: #ffffff">了解详情</span>
          </router-link> -->
        </div>
        <div style="width: 1200px; margin-top: 30px">
          <p
            style="
              color: #0000007f;
              line-height: 32px;
              font-size: 18px;
              text-indent: 40px;
              font-weight: 0;
              margin: 20px 0;
            "
          >
            {{ obj.phylogeny.hade.phy_intro }}
          </p>
        </div>
        <div
          class="flex-r-b-c"
          style="width: 1200px; height: 510px; margin: 30px 0"
        >
          <div
            v-for="(v, i) in obj.phylogeny.data"
            :key="i"
            style="width: 560px; height: 510px"
            class="divs_img_phy cur"
          >
            <div style="width: 100%; height: 260px; overflow: hidden">
              <img :src="v.img" class="img_div_faz" />
            </div>
            <div
              class="flex-c-b-c"
              style="padding: 20px; height: calc(510px - 40px - 260px)"
            >
              <div class="titleTextBj">
                <p style="text-align: center; color: #000; font-size: 24px;">
                  {{ v.title }}
                </p>
              </div>
              <p
                style="
                  color: #0000007f;
                  font-size: 18px;
                  margin-top: 25px;
                  overflow: hidden;

                  text-overflow: ellipsis;

                  display: -webkit-box;

                  -webkit-line-clamp: 6;

                  -webkit-box-orient: vertical;
                "
              >
                {{ v.intro }}
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div
      class="back_1_img flex-c-c-c"
      :style="{ backgroundImage: 'url(' + obj.bgimg.hade.intro + ')' }"
    >
      <div style="width: 1200px">
        <span style="font-size: 30px; color: #b6633a; line-height: 50px">
          {{ obj.bgimg.hade.title }}
        </span>
      </div>
    </div>
    <div class="flex-c-c-c" style="width: 100%; height: auto">
      <div class="homeBoxBj_1">
        <div
          class="flex-c-c-c"
          style="width: 1200px; height: 56px; margin-top: 30px"
        >
          <span style="font-size: 40px; color: #534036">{{
            obj.news.hade.news_title
          }}</span>
        </div>
        <div style="width: 1200px; margin-top: 30px">
          <p
            style="
              color: #0000007f;
              line-height: 28px;
              font-size: 20px;
              text-indent: 40px;
              margin: 20px 0;
            "
          >
            {{ obj.news.hade.news_intro }}
          </p>
        </div>
        <div
          class="flex-r-b-c"
          style="
            width: 1200px;
            height: auto;
            margin: 30px 0;
            flex-wrap: wrap !important;
          "
        >
          <div
            v-for="(v, i) in obj.news.data"
            :key="i"
            style="width: 540px; height: 280px"
            class="divs_img_phy cur"
          >
            <div
              style="
                width: 100%;
                height: 280px;
                overflow: hidden;
                position: relative;
              "
              class="divs_fald"
            >
              <img :src="v.img" style="width: 100%; height: auto" />
              <div
                class="flex-c-c-c bottom_div"
                style="
                  width: 100%;
                  height: 280px;
                  overflow: hidden;
                  position: absolute;
                  left: 0;
                  top: 0;
                  background-color: #00000033;
                "
              >
                <div class="flex-c-c-c">
                  <p
                    style="
                      text-align: center;
                      color: #fff;
                      font-size: 24px;
                      line-height: 60px;
                    "
                  >
                    {{ v.title }}
                  </p>
                  <div
                    style="width: 250px; height: 1px; background-color: #ffffff"
                  ></div>
                  <p style="color: #ffffff; font-size: 14px; line-height: 60px">
                    {{ v.intro }}
                  </p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="flex-c-c-c" style="width: 100%; height: auto">
      <div class="homeBoxBj_2">
        <div
          class="flex-c-c-c"
          style="width: 1200px; height: 56px; margin-top: 30px"
        >
          <span style="font-size: 40px; color: #534036">{{
            obj.ann.hade.ann_title
          }}</span>
        </div>
        <div style="width: 1200px; margin-top: 30px">
          <p
            style="
              color: #0000007f;
              line-height: 28px;
              font-size: 20px;
              text-indent: 40px;
              margin: 20px 0;
            "
          >
            {{ obj.ann.hade.ann_intro }}
          </p>
        </div>
        <div
          class="flex-r-b-c"
          style="width: 1200px; height: auto; align-items: end !important"
        >
          <div class="flex-c-c-c" style="width: 540px; height: auto">
            <span style="font-size: 40px; color: #534036">
              {{ obj.ann.data.title }}
            </span>
            <p style="font-size: 20px; color: #0000007f; margin-top: 40px">
              {{ obj.ann.data.intro }}
<!--              <span-->
<!--                class="cur"-->
<!--                style="text-decoration: underline; color: #8080ff"-->
<!--                @click="toNotice"-->
<!--                >了解详情</span-->
<!--              >-->
            </p>
          </div>
          <div style="width: 540px; height: 321px; overflow: hidden">
            <img :src="obj.ann.data.img" style="width: 100%; height: auto" />
          </div>
        </div>
      </div>
    </div>
    <div class="flex-c-c-c" style="width: 100%; height: auto">
      <div
        class="flex-c-c-c"
        style="width: 1200px; height: 56px; margin-top: 30px"
      >
        <span style="font-size: 40px; color: #534036">{{
          obj.goods.hade.goods_title
        }}</span>
      </div>
      <div style="width: 1200px; margin-top: 30px">
        <p
          style="
            color: #0000007f;
            line-height: 28px;
            font-size: 20px;
            text-indent: 40px;
            margin: 20px 0;
          "
        >
          {{ obj.goods.hade.goods_intro }}
        </p>
      </div>
      <div
        class="flex-r-b-c"
        style="
          width: 1200px;
          height: auto;
          margin: 30px 0;
          flex-wrap: wrap !important;
        "
      >
        <div
          v-for="(v, i) in obj.goods.data"
          :key="i"
          style="width: 285px; height: 300px"
          class="divs_img_phy cur"
        >
          <div
            style="
              width: 100%;
              height: 300px;
              overflow: hidden;
              position: relative;
            "
            class="cp_img_div_hov"
          >
            <img :src="v.img" style="width: 100%; height: auto" />
            <div
              class="flex-c-c-c cp_img_div_hov1"
              style="
                width: 100%;
                height: 300px;
                overflow: hidden;
                position: absolute;
                left: 0;
                background-color: #00000033;
              "
            >
              <div class="flex-c-c-c">
                <p
                  style="
                    text-align: center;
                    color: #fff;
                    font-size: 24px;
                    line-height: 40px;
                  "
                >
                  {{ v.title }}
                </p>
                <p style="color: #ffffff; font-size: 14px; line-height: 40px">
                  {{ v.intro }}
                </p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div
      class="flex-c-c-c divs_router_link"
      style="width: 100%; height: auto; justify-content: flex-end !important"
    >
      <img src="../assets/td.svg" style="width: 56px; height: auto" />
      <router-link
        class="cur"
        tag="span"
        to="/me"
        style="font-size: 40px; color: #534036"
      >
        关于我们
      </router-link>
    </div>
  </div>
</template>

<script>
import { Message } from "element-ui";
export default {
  data() {
    return {
      obj: {},
      swiperOption: {
        direction: "horizontal",
        slidesPerView: 1,
        spaceBetween: 0,
        pagination: {
          el: ".swiper-pagination",
          clickable: true,
        },
      },
      swi_obj: [],
      videoList:[],
      currentIndex :0,//当前所在图片下标
      timer:null,//定时轮询
      viewVideo: false,
      videoSrc:"",
    };
  },
  computed: {
    swiper() {
      return this.$refs.mySwiper.swiper;
    },
    changePic() {
      return {
        transform: `translate3d(${this.width}px, 0, 0)`, //主要实现核心
      };
    },
  },
  methods:{
    //开启定时器
    startInterval(){
      // 事件里定时器应该先清除在设置，防止多次点击直接生成多个定时器
      clearInterval(this.timer);
      this.timer = setInterval(()=>{
        this.currentIndex++;
        if(this.currentIndex > this.videoList.length-1){
          this.currentIndex = 0
        }
      },3000)
    },
    // 点击左右箭头
    clickIcon(val){
      console.log(val)
      if(val==='down'){
        this.currentIndex++;
        if(this.currentIndex==this.videoList.length){
          this.currentIndex = 0;
        }
      }else{
        // 第一种写法
        this.currentIndex--;
        if(this.currentIndex < 0){
          this.currentIndex = this.videoList.length-1;
        }
        // 第二种写法
        // if(this.currentIndex == 0){
        //   this.currentIndex = this.videoList.length;
        // }
        // this.currentIndex--;
      }
      console.log(this.currentIndex)
    },
    // 点击控制圆点
    changeImg(index){
      console.log(index);
      this.currentIndex = index
      console.log(this.currentIndex);
      this.$forceUpdate();
    },
    //鼠标移入移出控制
    changeInterval(val){
      if(val){
        clearInterval(this.timer)
      }else{
        this.startInterval()
      }
    },

    SeeVideo(e){
      console.log(e)
      this.videoSrc = e.video_url
      console.log(this.videoSrc)
      this.viewVideo = true

      this.$nextTick(() => {
        this.$refs.vueRef.play();//播放
      })

    },

    // 取消预览
    handleCancel() {
      this.viewVideo = false;
      this.$refs.vueRef.pause();//暂停
    },


  },
  mounted() {


    let headers = {
      token: this.$md5(this.$key + this.$dataTime()),
      rtimes: this.$dataTime(),
    };
    this.$axios
        .post(this.$base + "/video/videoLists", headers)
        .then((res) => {
          if (res.data.code == 2000) {
            this.videoList = res.data.data.data;
              this.startInterval()
            console.log(this.videoList);
          } else {
            Message.error(res.data.msg);
          }
          console.log(res);
        })
        .catch(function (error) {
          Message.error(error.message);
        });
    this.$axios
      .post(this.$base + "/Index/indexInfo", headers)
      .then((res) => {
        if (res.data.code == 2000) {
          this.obj = res.data.data;
        } else {
          Message.error(res.data.msg);
        }
        console.log(res);
      })
      .catch(function (error) {
        Message.error(error.message);
      });
    this.$axios
      .post(this.$base + "/Index/carouselImg", headers)
      .then((res) => {
        if (res.data.code == 2000) {
          this.swi_obj = res.data.data;
        } else {
          Message.error(res.data.msg);
        }
        console.log(res);
      })
      .catch(function (error) {
        Message.error(error.message);
      });
    headers.title = "index";
    this.$axios
      .post(this.$base + "/Index/getWebInfo", headers)
      .then((res) => {
        if (res.data.code == 2000) {
          var link =
            document.querySelector("link[rel*='icon']") ||
            document.createElement("link");
          link.type = "image/x-icon";
          link.rel = "shortcut icon";
          link.href = res.data.data.ico;
          document.title = res.data.data.web_title;
          document.getElementsByTagName("head")[0].appendChild(link);
        } else {
          Message.error(res.data.msg);
        }
        console.log(res);
      })
      .catch(function (error) {
        Message.error(error.message);
      });
  },

};
</script>

<style scoped lang="less">
.mask {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: 10;
  background-color: #000000;
  opacity: 0.6;
}
/* 内容层 z-index要比遮罩大，否则会被遮盖 */
.videomasks {
  max-width: 1200px;
  position: fixed;
  left: 0;
  top: 50%;
  margin-top: -30%;
  z-index: 20;
  /* transform: translate(-50%, -50%); */
}


.showImg {

  position: relative;
  overflow: hidden;
  width: 560px;
  height: 380px;
  border-radius: 10px;
  float: left;
  /* 清除li前面的圆点 */

}

li {
  list-style-type: none;
}

/* 轮播图片 */
.showImg img {
  width: 100%;
  height: 100%;
}

/* 箭头图标 */
.iconDiv {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 30px;
  height: 30px;
  border: 1px solid #666;
  border-radius: 15px;
  background-color: rgba(125, 125, 125, 0.2);
  line-height: 30px;
  text-align: center;
  font-size: 25px;
  cursor: pointer;
}
.iconDiv:hover {
  background-color: white;
}
.icon-left {
  left: 10px;
}
.icon-right {
  right: 10px;
}

/* 控制圆点 */
.banner-circle {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 20px;
}
.banner-circle ul {
  margin: 0 50px;
  height: 100%;
  text-align: right;
}
.banner-circle ul li {
  display: inline-block;
  width: 14px;
  height: 14px;
  margin: 0 5px;
  border-radius: 7px;
  background-color: rgba(125, 125, 125, 0.8);
  cursor: pointer;
}
.active {
  background-color: black !important;
}


.vvx-tabs-box {
  width: 580px;
  height: 380px;
  margin-left: 40px;
  float: left;
  overflow: hidden;
}
.vvx-tabs-btn {
  height: 30px;
  width: 100%;
  position: relative;
}
.vvx-tabs-btn .line {
  position: absolute;
  top: 11px;
  right: 0px;
  height: 8px;
  width: 90%;
  box-sizing: border-box;
  border-top: 1px solid #f0f0f0;
  border-bottom: 1px solid #f0f0f0;
}
.vvx-tabs-btn .tab-bg03 {
  width: 380px;
  //background: url(../images/vvx-tab03-bg.png) no-repeat left center;
}
.vvx-tabs-btn .tb-bn {
  height: 30px;
  position: relative;
  float: left;
}
.vvx-tabs-btn .tb-bn a.cur {
  background: url(../assets/vvx-tab-curbg.png) no-repeat center center;
  color: #fff;
  font-weight: bold;
  border-radius: 10px;
}
.vvx-tabs-btn .tb-bn a {
  float: left;
  height: 30px;
  width: 110px;
  font-size: 16px;
  color: #444;
  line-height: 30px;
  text-align: center;
  margin-right: 10px;
}
.vvx-tabs-btn .more {
  height: 30px;
  line-height: 30px;
  width: 70px;
  box-sizing: border-box;
  padding-left: 10px;
  position: relative;
  background: url(../assets/vvx-tab-morebg.png) no-repeat;
}

.vvx-tabs-btn .rt {
  float: right;
}

.vvx-tabs-btn .more a {
  display: block;
  height: 30px;
  width: 60px;
  text-align: center;
  font-size: 16px;
  color: #444;
  vertical-align: middle;
}

.vvx-tabs-group{
  height: 100%;
  width: 100%;
  margin-top: 10px;
  ul{
    margin: 0;
    padding: 0;
  }
}

.vvx-tabs-list li a {
  float: left;
  box-sizing: border-box;
  padding-left: 12px;
  font-size: 18px;
  line-height: 50px;
  color: #444;
  background: url(../assets/vvx-tab-icon01.png) no-repeat 2px center;
  width: 80%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.vvx-tabs-list li span {
  float: right;
  line-height: 36px;
  font-size: 17px;
  color: #9e9e9e;
}


.titleTextBj {
  background: url("../assets/title_text_bj.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  padding: 20px 40px;
  width: 40%;
  margin: 0 auto;
}

.homeBoxBj_0 {
  background: url("../assets/home_gonggao_bj.jpg");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-size: 100% 100%;
  padding: 40px;
  margin: 20px auto;
}

.homeBoxBj {
  background: url("../assets/homeBoxBj.jpg");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  padding: 20px 40px;
  margin: 20px auto;
}

.homeBoxBj_1 {
  background: url("../assets/home_zixun_bj.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  padding: 20px 40px;
  margin: 20px auto;
}

.homeBoxBj_2 {
  background: url("../assets/home_gonggao_bj.jpg");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  padding: 40px;
  margin: 20px auto;
}

.swiper {
  width: 100%;
  height: 100%;
}

.swiper-slide {
  text-align: center;
  font-size: 18px;
  background: #fff;

  /* Center slide text vertically */
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
}

.swiper-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.swiper-pagination-bullet {
  width: 20px;
  height: 20px;
  text-align: center;
  line-height: 20px;
  font-size: 12px;
  color: #000;
  opacity: 1;
  background: rgba(0, 0, 0, 0.2);
}

.swiper-pagination-bullet-active {
  color: #fff;
  background: #007aff;
}

.divs_btn1:hover span {
  color: red;
}

.divs_img_phy {
  background-image: inherit;
  background-position: inherit;
  background-size: inherit;
  background-repeat: inherit;
  background-attachment: inherit;
  background-origin: inherit;
  background-clip: inherit;
  background-color: rgb(255, 255, 255);
  border: none;
  border-radius: 0px;
  box-shadow: rgba(0, 0, 0, 0.047) 0px 5px 5px;
}

.back_1_img {
  width: 100%;
  height: 300px;
  overflow: hidden;
  background-position: center top;
  background-repeat: no-repeat;
  background-attachment: scroll;
  background-size: cover;
  background-origin: border-box;
  border: none;
  border-radius: 0px;
  box-shadow: none;
}

.divs_router_link {
  position: relative;
  margin: 150px 0px;

  img {
    position: absolute;
    transition: top 2s;
    top: -50px;
    left: calc(50% - 28px);
  }
}

.divs_router_link:hover {
  span {
    color: #86633a !important;
  }

  img {
    top: -100px;
  }
}

.img_div_faz {
  width: 100%;
  height: auto;
  transition: width 2s, height 2s;
}

.img_div_faz:hover {
  width: 130%;
  height: auto;
}

.divs_fald {
  position: relative;
  overflow: hidden;

  img {
    width: 100%;
    height: auto;
    transition: width 2s, height 2s;
  }

  .bottom_div {
    opacity: 0;
    transition: opacity 2s;
  }
}

.divs_fald:hover {
  img {
    width: 130% !important;
    height: auto;
  }

  .bottom_div {
    opacity: 1 !important;
  }
}

.cp_img_div_hov {
  width: 285px;
  height: 300px;

  .cp_img_div_hov1 {
    width: 285px;
    height: 300px;
    bottom: -300px !important;
    opacity: 0;
    transition: opacity 3s, bottom 1.5s;
  }
}

.cp_img_div_hov:hover {
  .cp_img_div_hov1 {
    width: 285px;
    height: 300px;
    bottom: 0px !important;
    opacity: 1 !important;
  }
}
</style>
